<script>
import { onMounted, ref, toRaw } from 'vue';
import Vcode from "vue3-puzzle-vcode";
import { getReg } from "../assets/api/login"
export default {
  components: {
    Vcode
  },
  setup() {
    const input = ref('')
    const password = ref('')
    const checked1 = ref(true)
    const emit = ref('')

    const isShow = ref(false);

    const onShow = () => {
      isShow.value = true;
    };

    const onClose = () => {
      isShow.value = false;
    };

    const onSuccess = () => {
      onClose(); // 验证成功，需要手动关闭模态框
      getRegFun()
    };

    // 注册接口
    const getRegFun = () => {
      const data = {
        username: input.value,
        email: emit.value,
        password: password.value
      };
      // 使用 toRaw 转换数据
      const rawData = toRaw(data);

      getReg(rawData).then(res => {
        console.log(res);
      }).catch(error => {
        console.error('There was an error!', error);
      });
    };


    onMounted(() => {

    })

    return {
      input,
      password,
      isShow,
      onShow,
      onClose,
      onSuccess,
      checked1,
      emit

    }
  }
}
</script>

<template>
  <div class="login">
    <div class="main_body">
      <div class="qr_code">
        <div class="login-title">欢迎进入<br>后台管理平台</div>
      </div>

      <div class="new_login">
        <div class="login_input">

          <div class="logo">
            <img src="../assets/logo.png" alt="">
          </div>


          <div class="input">
            <div class="user">
              <p>账号:</p><el-input v-model="input" style="width: 350px;height: 40px;" placeholder="请输入账号" />
            </div>
            <div class="emit">
              <p>邮箱:</p><el-input v-model="emit" style="width: 350px;height: 40px;" type="email" placeholder="请输入邮箱" />
            </div>
            <div class="password">
              <p>密码:</p><el-input v-model="password" style="width: 350px;height: 40px;" type="password"
                placeholder="请输入密码" show-password />
            </div>


            <div class="login_btn">
              <el-button type="primary" style="width: 100px;" @click="onShow">注册</el-button>
              <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  background: url(../assets//img/demo2.png);
  min-width: 1200px;
  height: 100vh;
  // min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;

  .main_body {
    width: 920px;
    height: 600px;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 138, 233, .15);
    display: flex;
    flex: 1;

    .qr_code {
      float: left;
      width: 600px;
      height: 600px;
      border-radius: 10px 0 0 10px;
      background: url(../assets//img//login-site-bg.png) center center no-repeat;
      position: relative;
      // padding: 0 78px;
      background-size: 380px 600px;

      .login-title {
        font-size: 28px;
        color: #fff;
        letter-spacing: 9px;
        margin: 150px 0 80px 0;
      }
    }

    .new_login {
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 0.8;
      position: relative;
      float: left;
      border-radius: 0 10px 10px 0;

      .login_input {
        width: 100%;
        height: 100%;
        // margin-top: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;




        .input {

          display: flex;
          width: 100%;
          flex-wrap: wrap;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .user {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 40px;

            p {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 32px;
              color: #91979b;
              font-size: 18px;
              font-weight: 500;
            }
          }

          .password {
            display: flex;
            flex-wrap: nowrap;
            padding-top: 30px;

            p {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 32px;
              color: #91979b;
              font-size: 18px;
              font-weight: 500;
            }
          }

          .emit {
            display: flex;
            flex-wrap: nowrap;


            p {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 32px;
              color: #91979b;
              font-size: 18px;
              font-weight: 500;
            }
          }

          .login_btn {
            padding-top: 40px;
          }

          .day30 {
            padding-top: 40px;
            display: flex;
            width: 70%;
            justify-content: space-between;

            p {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
            }

          }


        }

      }
    }

  }
}
</style>